<script setup>
import {ref,onMounted,nextTick,watch} from 'vue'
import {reqSkuList,reqSaleSku,reqCancelSale,reqSkuInfo,reqDeleteSku,reqUpdateSale} from '@/api/product/sku'
import { ElMessage } from 'element-plus';
import SkuForm from '@/views/product/spu/skuForm.vue'
import useCategoryStore from '@/store/category'
import {reqHasSpu} from '@/api/product/spu'

let categoryStore = useCategoryStore()

let pageNo = ref(1)  // 当前页码
let pageSize = ref(10)  // 每页展示多少条数据
let total = ref(0)  // 总数据
let skuArr = ref([])   // 用来保存sku列表
let drawer = ref(false)  // 控制drawer的显示与隐藏(控制详情组件的显示与隐藏)
let skuInfo = ref({})  // 用来保存sku信息
let skuForm = ref()  // 获取sku组件实例
let spuArr = ref([])  // 获取spu列表

let skuParams = ref({  // 用来收集用户输入的信息
    name:'',
    price:'',
    weight:'',
    sku_desc:'',
})
let spuParams = ref({  // 用来收集spu信息

})
let spuPageNo = ref(1)
let spuPageSize = ref(10)
let spuTotal = ref(0)  // 总数据

let dialogFormVisible = ref(false)  // 用来控制编辑sku界面的显示与隐藏
let scene = ref(0)  // 控制分类选项的可用与禁用
let addSkuDialog = ref(false)  // 用来控制添加sku界面的显示与隐藏

const getHasSku = (pager=1)=>{
    // 当前页码
    pageNo.value = pager
    let category_id = categoryStore.c3Id
    reqSkuList(pageNo.value,pageSize.value,category_id).then(res=>{
        if(res.data.code==200){
            total.value=res.data.total
            skuArr.value = res.data.data
        }
    })
}
onMounted(()=>{
    if(categoryStore.c3Id){
        getHasSku()
    }
})

// 监控categoryStore.c3Id，三级分类id一旦变化，就发送请求获取数据
watch(()=>categoryStore.c3Id,()=>{
    if(categoryStore.c3Id){
        getHasSku()
    }
})

// 获取SPU列表
const getHasSpu = (page=1)=>{
    spuPageNo.value = page
    // @current-change默认会传递当前页面进来
    reqHasSpu(spuPageNo.value,spuPageSize.value,categoryStore.c3Id).then(res=>{
        if(res.data.code==200){
            spuArr.value=res.data.data.spu_list
            spuTotal.value = res.data.data.total_num
        }else{
            ElMessage({
                type:'error',
                message:res.data.msg
            })
        }
        
    })
}




// 每页展示的数据条数发生变化时执行函数
const handler = (pageSizes) =>{
    getHasSku()  // 重新获取第一页数据
}
// 点击sku上下架按钮触发事件
const updateSale = (row) =>{
    let operate = row.is_sale==0?1:0
    reqUpdateSale(row.id,operate).then(res=>{
        if(res.data.code==200){
            ElMessage({
                type:'success',
                message: operate==0 ? '下架成功':'上架成功'
            })
            row.is_sale=operate
        }else{
            ElMessage({
                type:'error',
                message: ( operate==0 ? '下架失败':'上架失败' ) + res.data.msg
            })
        }
    })

}

// 点击编辑sku按钮触发的事件
const updateSku = (row)=>{
    dialogFormVisible.value = true
    skuParams.value = row
    // skuForm.value.initSkuData()
    nextTick(()=>{
        skuForm.value.editSkuInitData(row)
    })
    
}
// 点击查看详情按钮触发的事件
const findSku = (row) => {
    drawer.value=true
    
    reqSkuInfo(row.id).then(res=>{
        if(res.data.code==200){
            skuInfo.value = res.data.data[0]
        }else{
            ElMessage({
                type:'error',
                message:'获取详情失败，' + res.data.msg
            })
        }
        
    })
}
// 点击删除sku按钮时触发的事件
const deleteSku = (row)=>{
    reqDeleteSku(row.spu_id,row.id).then(res=>{
        if(res.data.code==200){
            ElMessage({
                type:'success',
                message:'删除成功'
            })
            getHasSku(skuArr.value.length>1 ? pageNo.value : pageNo.value-1)
        }else{
            ElMessage({
                type:'error',
                message:'删除失败，' + res.data.msg
            })
        }
    })
}

// 点击添加sku按钮时触发的事件
const addSku = () => {
    addSkuDialog.value=true
    if(!spuParams.id){
        getHasSpu()
    }
}
const spuAddSku = (row)=>{
    spuParams.value = row
    addSkuDialog.value = false
    dialogFormVisible.value = true
    nextTick(()=>{
        skuForm.value.initSkuData(row)
    })
}




// 给SkuForm组件绑定事件,切换场景
const changeScene = ({flag,params})=>{
    dialogFormVisible.value = false
    getHasSku()
}


</script>

<template>
    <div class="box">
        <Category :scene="scene"></Category>
        <el-card style="margin: 10px 0;">
            <el-button v-has="`btn.Sku.addSku`" type="primary" :disabled="categoryStore.c3Id?false:true" @click="addSku">添加SKU</el-button>
            <!-- 展示数据 -->
            <el-table border style="margin: 10px 0;" :data="skuArr">
                <el-table-column type="index" label="序号" align="center" width="80px"></el-table-column>
                <el-table-column label="名称" show-overflow-tooltip width="150px" prop="name"></el-table-column>
                <el-table-column label="描述" show-overflow-tooltip width="150px" prop="sku_desc"></el-table-column>
                <el-table-column label="图片" width="150px">
                    <template #="{row,$index}">
                        <img :src="row.default_img.url" alt="" style="width:100px;height: 100px;">
                    </template>
                </el-table-column>
                <el-table-column label="重量" width="150px" prop="weight"></el-table-column>
                <el-table-column label="价格" width="150px" prop="price"></el-table-column>
                <el-table-column label="操作" fixed="right" width="260px">
                    <template #="{row,$index}" >
                        <el-button v-has="`btn.Sku.is_sale`" type="primary" size="small" :icon="row.is_sale==1?'Bottom':'Top'" title="上架" @click="updateSale(row)"></el-button>
                        <el-button v-has="`btn.Sku.edit`" type="primary" size="small" icon="Edit" title="编辑" @click="updateSku(row)"></el-button>
                        <el-button v-has="`btn.Sku.view`" type="primary" size="small" icon="InfoFilled" title="查看详情" @click="findSku(row)"></el-button>
                        <el-popconfirm :title="`你确定要删除${row.skuName}吗`" width="200px" @confirm="deleteSku(row)">
                            <template #reference>
                                <el-button v-has="`btn.Sku.delete`" type="primary" size="small" icon="Delete" title="删除"></el-button>
                            </template>
                            
                        </el-popconfirm>
                        
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页器 -->
            <el-pagination
                v-model:current-page="pageNo"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]"
                background
                layout="prev, pager, next, jumper,total, sizes"
                :total="total"
                @current-change="getHasSku"
                @size-change="handler"
                />

            <!-- 抽屉组件 -->
            <el-drawer v-model="drawer" direction="rtl" size="50%">
                <template #header>
                    <h4>查看商品详情</h4>
                </template>
                <template #default>
                    <el-row style="margin: 10px 0;">
                        <el-col :span="6" >名称</el-col>
                        <el-col :span="18" >{{ skuInfo.name }}</el-col>
                    </el-row>
                    <el-row style="margin: 10px 0;">
                        <el-col :span="6" >描述</el-col>
                        <el-col :span="18" >{{ skuInfo.sku_desc }}</el-col>
                    </el-row>
                    <el-row style="margin: 10px 0;">
                        <el-col :span="6" >价格</el-col>
                        <el-col :span="18" >{{ skuInfo.price }}</el-col>
                    </el-row>
                    <el-row style="margin: 10px 0;">
                        <el-col :span="6" >平台属性</el-col>
                        <el-col :span="18">
                            <el-tag v-for="item in skuInfo.sku_category_attr">{{ item.attr_value }}</el-tag>
                        </el-col>
                    </el-row>
                    <el-row style="margin: 10px 0;">
                        <el-col :span="6" >销售属性</el-col>
                        <el-col :span="18">
                            <el-tag v-for="item in skuInfo.sku_sale_attr" type="danger">{{ item.saleAttrValue }}</el-tag>
                        </el-col>
                    </el-row>
                    <el-row style="margin: 10px 0;">
                        <el-col :span="6" >商品图片</el-col>
                        <el-col :span="18" >
                            <el-carousel :interval="4000" type="card" indicator-position="outside">
                                <el-carousel-item v-for="item in skuInfo.image_list" :key="item.id" :label="item.name">
                                    <img :src="item.url" alt="" style="height: 100%;width: 100%;">
                                </el-carousel-item>
                            </el-carousel>
                        </el-col>
                    </el-row>
                    
                </template>
            </el-drawer>

            <!-- dialog组件，用来编辑sku -->
            <el-dialog v-model="dialogFormVisible" :title="skuParams.id?'编辑sku':'添加sku' " :close-on-click-modal="false" >
                <SkuForm @changeScene="changeScene" ref="skuForm"></SkuForm>
            </el-dialog>

            <!-- dialog组件，用来添加sku -->
            <el-dialog v-model="addSkuDialog" :title="skuParams.id?'编辑sku':'添加sku' " :close-on-click-modal="false" >
                <div>
                    <p>请先选择在哪个SPU下添加SKU</p>
                    <el-table border style="margin: 10px 0;" :data="spuArr">
                        <el-table-column type="index" label="序号"></el-table-column>
                        <el-table-column label="SPU名称" prop="name"></el-table-column>
                        <el-table-column label="SPU描述" prop="description"></el-table-column>
                        <el-table-column label="操作">
                            <template #="{row,$index}">
                                <el-button icon="Plus" size="small" type="primary" @click="spuAddSku(row)">添加sku</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页器 -->
                    <el-pagination
                        v-model:current-page="spuPageNo"
                        v-model:page-size="spuPageSize"
                        :page-sizes="[10]"
                        background
                        layout="prev, pager, next, jumper,total, sizes"
                        :total="spuTotal"
                        @current-change="getHasSpu"
                        />
                </div>
            </el-dialog>

        </el-card>
    </div>
</template>

<style scoped lang="scss">
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>